<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>某个作者的所有诗词页面</title>
    <link rel="stylesheet" href="bootstrap-4.6.1-dist/css/bootstrap.min.css">
</head>
<body>
    <header id="header"></header>

    <div class="container" id="poems">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">首页</a></li>
                <li class="breadcrumb-item" aria-current="page"><a href="allAuthor.html">诗词大全</a></li>
                <li class="breadcrumb-item" aria-current="page"><a :href="'author.html?'+author" v-text="author">李流芳</a></li>
                <li class="breadcrumb-item active" aria-current="page"><span v-text="author">李流芳</span>所有的诗词</li>
            </ol>
        </nav>


        <div class="row">
            <div class="col col-sm-12 col-lg-12">
                <div class="card mt-3" v-for="p in poems">
                    <div class="card-body">
                        <h4 class="card-title" v-text="p.title">黄河夜泊</h4>
                        <p>
                            <a :href="'Dynasty.html?'+p.chaodai" v-text="p.chaodai">明代</a>·
                            <a :href="'author.html?'+p.zuozhe" v-text="p.zuozhe">李流芳</a>
                        </p>
                        <div v-html="p.body">

                            明月黄河夜，寒沙似战场。<br>奔流聒地响，平野到天荒。<br>吴会书难达，燕台路正长。<br>男儿少为客，不辨是他乡。

                        </div>
                        <div class="mt-2">
                            <a class="badge badge-secondary" v-html="p.type">黄河</a>
                            <!--<a class="badge badge-secondary">抒怀</a>
                            <a class="badge badge-secondary">惆怅</a>-->
                        </div>
                    </div>
                </div>
                <nav class="mt-3">
                    <ul class="pagination pagination-sm  justify-content-center">
                        <li class="page-item disabled">
                            <a class="page-link" aria-label="Previous" href="" @click.prevent="loadPoems(pageinfo.prePage)" v-show="!pageinfo.isFirstPage==true">
                                <span aria-hidden="true">&laquo;</span>
                                <span class="sr-only">上一页</span>
                            </a>
                        </li>
                        <li class="page-item" v-for="n in pageinfo.navigatepageNums">
                            <a class="page-link" href="" v-text="n" @click.prevent="loadPoems(n)"
                               :class="{'bg-secondary text-light': n == pageinfo.pageNum}">1</a>
                        </li>
                        <!--<li class="page-item">
                            <a class="page-link " href="#" v-for="n in pageinfo.navigatepageNums" @click.prevent="loadPoems(n)"
                               v-text="n" :class="{'bg-secondary text-light': n == pageinfo.pageNum}">1</a>
                        </li>-->
                        <li class="page-item "><a class="page-link" href="">
                            <span aria-hidden="true">当前页<span  v-text="pageinfo.pageNum">5</span></span>
                        </a></li>
                        <li class="page-item ">
                            <a class="page-link" aria-label="Next" href="" @click.prevent="loadPoems(pageinfo.nextPage)" v-show="!pageinfo.isLastPage==true">
                                <span aria-hidden="true">&raquo;</span>
                                <span class="sr-only">下一页</span>
                            </a>
                        </li>

                        <li class="page-item" >
                            <span aria-hidden="true">跳转到</span>
                            <input type="text" style="width: 40px" id="page"><button @click.prevent="JumpPoems()">跳转</button>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <footer id="footer"></footer>
</body>
<!--引入jq代码-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入axios 实现页面的异步请求-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    $("#header").load("common/navigation.html")
    $("#footer").load("common/footer.html")

    //获取当前作者的姓名
    var name = decodeURI(location.search.split("?")[1])

    let vm_poems = new Vue({
        el:"#poems",
        data:{
            poems:[],
            pageinfo:{},
            author:"",
            pages:""
        },
        methods:{
            loadPoems:function (pageNum) {
                if (!pageNum){
                    pageNum = 1;
                }
                axios({
                    url:"/poems/selectListByAuthor/"+name,
                    method:"post",
                    params:{
                        pageNum:pageNum
                    }
                }).then(function (r) {
                    vm_poems.poems = r.data.list
                    vm_poems.pageinfo = r.data;
                    vm_poems.author = name;
                    vm_poems.pages = r.data.pages
                    console.log("获取的所有数据为:"+JSON.stringify(r.data))
                })
            },
            JumpPoems:function () {
                var page = document.getElementById("page").value;
                if (page <= vm_poems.pageinfo.pages && page > 0){
                    this.loadPoems(page)
                }else {
                    alert("页码不对，请重新输入！！最大页码: " +vm_poems.pages)
                    $("#page").val('')
                }
            }
        },
        created:function () {
            this.loadPoems(1);
        }
    })
</script>
</html>